<template>
	<view class="cleanDetail-container">
		<view class="detail-item">
			<text class="left">业主姓名：</text>
			<text>张多多</text>
		</view>
		<view class="detail-item">
			<text class="left">联系电话：</text>
			<text>15846214579</text>
		</view>
		<view class="detail-item">
			<text class="left">报事地址：</text>
			<text>西溪花城1幢2单元503</text>
		</view>
		<view class="detail-item">
			<text class="left">记录编号：</text>
			<text>TSxxxxxxxxxxxxxxx</text>
		</view>
		<view class="detail-desc">
			花园门前有很多纸屑垃圾，需要保洁人员及时清扫，请及 时安排人员进行清扫，谢谢！
		</view>
		<view class="detail-img">
			<view class="img-item">
				<image src="../../static/icon/clean.png"></image>
			</view>
			<view class="img-item">
				<image src="../../static/icon/clean.png"></image>
			</view>
		</view>
		<view class="detail-item">
			<text class="left">处理时间：</text>
			<text>2020-11-10 11:00</text>
		</view>
		<view class="detail-item">
			<text class="left">处理人员：</text>
			<text>张跃</text>
		</view>
		<view class="detail-item">
			<text class="name">业主签名：</text>
			<view class="sign">
				<image src="../../static/icon/qm.png"></image>
			</view>
		</view>
		<button class="btn" @click="isEvaluateVisible = true">去评价</button>
		<evaluate-modal @submit="submitEvaluate" @close="isEvaluateVisible = false" v-if="isEvaluateVisible"></evaluate-modal>
	</view>
</template>

<script>
	import EvaluateModal from '@/components/evaluateModal.vue'
	export default {
		data() {
			return {
				isEvaluateVisible: false
			}
		},
		methods: {
			submitEvaluate(val) {
				console.log(val)
			}
		},
		components: {
			EvaluateModal
		}
	}
</script>

<style lang="scss">
	.cleanDetail-container {
		background-color: #f5f5f5;
		padding-bottom: 400rpx;
		.detail-item {
			width: 750rpx;
			height: 88rpx;
			display: flex;
			line-height: 88rpx;
			padding-left: 20rpx;
			background-color: #fff;
			.left {
				margin-right: 37rpx;
			}
			.sign {
				width: 115rpx;
				height: 88rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.name {
				margin-right: 26rpx;
			}
		}
		.detail-desc {
			background-color: #fff;
			padding-left: 20rpx;
			padding-bottom: 60rpx;
		}
		.detail-img {
			background-color: #fff;
			display: flex;
			.img-item {
				width: 230rpx;
				height: 230rpx;
				margin-left: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.btn {
			color: #fff;
			background-color: $theme-color;
			text-align: center;
			left: 0;
			right: 0;
			position: fixed;
			bottom: 0;
		}
	}
</style>
